<!doctype html>
<html>
<head>
{% load static %}
<meta charset="utf-8">
<title>js手机扫码</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,viewport-fit=cover">
<script src="https://www.jq22.com/jquery/vue.min.js"></script>

<script src="{% static './scan/js/VueQrcodeReader.umd.min.js' %}"></script>
<!--<script src="https://map.qq.com/api/gljs?v=1.exp&key=ERABZ-RQREL-WBOPL-M276A-TD5K3-ZHFW4"></script>-->
<!--  <style>-->
<!--    #container{-->
<!--        /*地图(容器)显示大小*/-->
<!--        height:10rem;-->
<!--    }-->
<!--  </style>-->
</head>

<body>
<div style="font-size: 0.5rem;text-align: center;margin-top:8rem">
  注：需要在手机端预览，PC端无效果，<br>
  此插件自动调用手机后置摄像头！
</div>
<!--<div id="container"></div>-->
<div id="app">
  <p>
    上次结果： <b>{{ decodedContent }}</b>
  </p>

  <p class="error">
    {{ errorMessage }}
  </p>

  <qrcode-stream @decode="onDecode" @init="onInit"></qrcode-stream>
</div>
<script>
new Vue({
  el: '#app',

  data() {
    return {
      decodedContent: '',
      errorMessage: ''
    }
  },

  methods: {
    onDecode(content) {
      // 获取页面get传参数
      // 获取URL中的查询字符串
      const queryString = window.location.search.slice(1);
      // 提取出get参数的值
      const params = {};
      queryString.split('&').forEach(item => {
        const [key, value] = item.split('=');
        params[key] = decodeURIComponent(value);
      });
      // console.log(params)
      this.decodedContent = content
      window.location.href = content + '?name=' + params.name + '&class_name=' + params.class_name
      + '&course_name=' + params.course_name + '&lat=' + params.lat + '&long=' + params.long
      ;
    },

    onInit(promise) {
      promise.then(() => {
        console.log('成功初始化！ 准备扫描！')
      })
        .catch(error => {
        if (error.name === 'NotAllowedError') {
          this.errorMessage = '嘿！我需要你的相机'
        } else if (error.name === 'NotFoundError') {
          this.errorMessage = '你的设备上有摄像头吗？'
        } else if (error.name === 'NotSupportedError') {
          this.errorMessage = '需要https协议地址 (HTTPS, localhost or file://)'
        } else if (error.name === 'NotReadableError') {
          this.errorMessage = '无法访问您的相机。 它已经被使用了吗？'
        } else if (error.name === 'OverconstrainedError') {
          this.errorMessage = '约束条件与任何已安装的摄像头都不匹配。 尽管没有前置摄像头，您是否要求过前置摄像头？'
        } else {
          this.errorMessage = 'UNKNOWN ERROR: ' + error.message
        }
      })
    }
  }
})
</script>


</script>
<!--<script>-->

<!--        // 通过用户在地图中选取的位置返回中文名称，-->
<!--        // 拿到中文名称调用腾讯位置服务的接口，返回经纬度坐标-->
<!--        //地图初始化函数，本例取名为init，开发者可根据实际情况定义-->
<!--        function initMap() {-->
<!--            //定义地图中心点坐标-->
<!--            var center = new TMap.LatLng(39.984120, 116.307484)-->
<!--            //定义map变量，调用 TMap.Map() 构造函数创建地图-->
<!--            var map = new TMap.Map(document.getElementById('container'), {-->
<!--                center: center,//设置地图中心点坐标-->
<!--                zoom: 17.2,   //设置地图缩放级别-->
<!--                pitch: 43.5,  //设置俯仰角-->
<!--                rotation: 45    //设置地图旋转角度-->
<!--            });-->
<!--        }-->


<!--</script>-->

</body>
</html>
